<nz-spin [nzSpinning]="isSpinning" [nzIndicator]="showProgress?progressTemplate:null">
    <as-split #mySplit direction="horizontal" gutterSize='4'>
        <as-split-area [size]='50'>
            <app-filelist #local listType='Local' [partner]=remote [(path)]='localPath' (fileOper)='upload($event)'>
            </app-filelist>
        </as-split-area>
        <as-split-area [size]='50'>
            <app-filelist #remote listType='Remote' [(path)]='remotePath' [host]='host' (fileOper)='download($event)' (stateChange)='onStateChange.emit($event)'>
            </app-filelist>
        </as-split-area>
    </as-split>
</nz-spin>
<ng-template #progressTemplate>
    <div class='progress'>
        <H3>{{transType}}</H3>
        <div>{{transFileName}}</div>
        <nz-progress [nzPercent]="progress1" nzStatus="active"></nz-progress>
        <nz-progress [nzPercent]="progress2" nzStatus="active"></nz-progress>
    </div>
</ng-template>